<template>
  <main class="index-main">
    <Home />
    <Banner :url="banner[0]" />

    <section class="mobile">
      <Mobile />
      <Banner :url="banner[1]" />
    </section>

    <section>
      <Homeele :data-homee="dataHomee"/>
      <Banner :url="banner[2]" />
    </section>

    <section>
      <Homeele :data-homee="dataSmart"/>
      <Banner :url="banner[3]" />
    </section>

    <section>
      <Hot />
      <Banner :url="banner[4]" />
    </section>

    <section>
      <mContent />
      <Banner :url="banner[5]" />
    </section>

    <section>
      <mVedio />
    </section>
  </main>
</template>

<script>
import dataHomee from 'assets/data/data-index-homee'
import dataSmart from 'assets/data/data-index-smart'
import dataBanner from 'assets/data/data-index-banner'

import Banner from 'components/pages-index/banner/banner'
import Home from 'components/pages-index/home/home'
import Mobile from 'components/pages-index/mobile/mobile'
import Homeele from 'components/pages-index/homeele/homeele'
import Hot from 'components/pages-index/hot/hot'
import mContent from 'components/pages-index/content/content'
import mVedio from 'components/pages-index/vedio/vedio'

export default {
  components: {
    Home,
    Mobile,
    Homeele,
    Banner,
    Hot,
    mContent,
    mVedio
  },
  data() {
    return {
      banner: dataBanner.banner,
      dataHomee: dataHomee,
      dataSmart: dataSmart
    }
  }
}
</script>

<style lang="stylus">
.index-main
  background-color #f5f5f5
  padding-bottom 46px
</style>
